.detail-wrap{
  display: flex;
  flex-direction: column;
  min-height: 800px;
  header{
    flex-basis: 46px;
    background: #fff;
    overflow: hidden;
  }
  section{
    flex: 1;
    padding: 10px;
    display: flex;
    .el-form-item{
      margin-bottom: 14px;
      .el-form-item__error{
        padding-top: 2px;
      }

    }
    .left-panel{
      flex: 1;
      margin-right:5px ;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .el-card{
        border: none;
      }
      >div{
        background: #fff;
        margin-bottom: 10px;
        &:last-child{
          margin-bottom: 0;
        }
        table{
          width: 100%;
          th{
            border-bottom: 1px solid #ebeef5;
            border-right: 1px solid #ebeef5;
          }
          th, td{
            text-align: center;
            padding: 6px 0;
          }
        }
      }
      .base{
        flex: 2;
        .item{
          ul{
            width: 100%;
            list-style: none;
            padding: 0;
            li{
              width: 50%;
              float: left;
              margin: 0;
              padding: 0;
              margin-bottom: 6px;
              &:first-child{
                width: 100%;
              }
              span{
                //font-weight: bold;
              }
              &:nth-child(-n + 2){
                //margin-bottom: 10px ;
              }
            }
          }
        }
      }
      .real{
        flex: 2;
      }
      .ship{
        flex: 3;
      }
      .mess{
        flex: 3;
        display: flex;
        .out-panel, .oil-panel{
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          background: #fff;
          .tip{
            p{
              text-align: center;
            }
            small{
              color: #666;
            }
          }
        }
        .out-panel{
          margin-right: 5px;
        }
        .oil-panel{
          margin-left: 5px;
        }
      }
    }
    .right-panel{
      flex: 1;
      margin-left: 5px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      >div:first-child{
        margin-bottom: 10px;
      }
      .map, .chart{
        flex: 1;
        background: #fff;
      }
      .chart{
        display: flex;
        flex-direction: column;
        .line-chart, .bar-chart{
          flex: 1;
        }
      }
    }
  }
  .el-card__body, .el-card__header{
    padding: 4px 10px;
  }
  .el-card__body{
    .el-table th .cell{
      font-weight: normal;
      word-break: break-all;
    }
  }
  .el-card__header{
    .clearfix{
      line-height: 26px;
      span{
        font-size: 16px;
        font-weight: bold;
      }
      .el-button--text{
        span{
          font-weight: normal;
        }
      }
    }
  }
  .el-table th .cell{
    color: #333;
  }
  .map{
    .el-card{
      display: flex;
      flex-direction:column;
      height: 100%;
      .el-card__body{
        flex: 1;
      }
    }
  }
}
